<template>
	<view class="detail">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="topSwiper">
				<!-- <block v-if="personList.length">
					<swiper class="person_shopMain" :autoplay="true" :interval="3000" :vertical="true" :duration="1000"
						easing-function="easeInOutCubic" :current="currentIndex" @change="personChange" circular>
						<swiper-item v-for="(item, index) in personList" :key="index">
							<view class="person_shop" :class="index == currentIndex ? 'person_Animation' : ''">
								<image
									:src="item.HeadImgUrl || 'http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'"
									mode="aspectFill"></image>
								<view class="person_tips">
									{{ item.Remark || '--' }}
								</view>
							</view>
						</swiper-item>
						
						
					</swiper>
				</block> -->


				<view class="swiperBox">
					<swiper :autoplay="true" :indicator-dots="true" indicator-color="#FFFFFF"
						indicator-active-color="#FEF0BC" circular>
						<swiper-item v-for="(item, index) in bannerList" :key="index" @click="lookimg(item, index)">
							<view class="bannerImageBox">
								<image class="adverimg" :src="item.Banner" mode="aspectFill"></image>
							</view>
						</swiper-item>

					</swiper>
					<view class="nullimg_box" v-if="!details.Stock">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17429825652471316.png"
							mode="widthFix"></image>
					</view>
				</view>

				<view class="limitTime_bodoy"
					v-if="details.ProductLimitPromotion && details.ProductLimitPromotion.IsShow == 1">
					<view class="limitTime_cell" :class="details.PromotionType == '预售' ? 'limitTime_cell_green' : ''">
						<view class="limitTime_titbox">
							<view class="limit_title">
								{{ details.ProductLimitPromotion.Title || '--' }}
							</view>
							<!-- <view class="limit_text">
								距开始2天1小时20秒
							</view> -->
						</view>
						<view class="limitTime_litbox">
							{{ details.ProductLimitPromotion.Tips }}{{ $util.getCounTdown(downTime) }}
						</view>
					</view>
				</view>
			</view>



			<view class="good">
				<view class="good_info">
					<view class="good_price">
						<block v-if="details.PromotionType">
							<view class="proTypeBox">{{ details.PromotionType || '' }}</view>
						</block>
						<block v-else>
							<view class="proEmpty"></view>
						</block>
						<block v-if="details.Promotion == 0">
							<view class="good_newPrice">
								<view class="dollor">￥</view>
								{{ details.Price || '--' }}
							</view>
						</block>
						<block v-else>
							<view class="good_newPrice">
								<view class="dollor">￥</view>
								{{ details.Promotion || '--' }}
							</view>
							<view class="good_oldPrice">￥{{ details.Price || '--' }}</view>
						</block>
					</view>
					<view class="good_tags">
						<view class="good_tag stock">库存{{ details.Stock || 0 }}</view>
						<view class="good_tag saled">已售{{ details.VirtualSellNum || 0 }}</view>
					</view>
				</view>
				<view class="good-titbox">
					<view class="good_name">{{ details.ProductName }}</view>
					<!-- <view class="icon" @click="toggleCollect(details.ID)">
						<image v-if="isCollect != 1"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721614396475655.png"
							mode="aspectFill"></image>
						<image v-else src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17216144146531433.png"
							mode="aspectFill"></image>
						<text>收藏</text>
					</view> -->
					<view class="icon" @click="$refs.wxPopup.open()">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17249228891201225.png"
							mode="aspectFill"></image>
						<text>分享</text>
					</view>
				</view>
				<!-- <view class="good_labels">
					<view class="good_label" v-for="(tag, index) in tagsArray" :key="index">
						{{ tag.trim() }}
					</view>
				</view> -->
				<view class="good_labels" v-if="details.ProductPromotionList.length > 0">
					<view class="good_label" v-for="(tag, index) in details.ProductPromotionList" :key="index">
						{{ tag.Title }}
					</view>
				</view>
				<view class="sellProgress">
					<view class="spBox">
						<block v-for="(item, index) in timeLine" :key="index">
							<view class="spCell">
								<view class="spPrice" :style="{ opacity: item.IsShow }">
									{{ item.Price > 0 ? `${item.Price}` : '' }}</view>
								<view class="spPro" :style="{ background: item.BgColor }"></view>
								<view class="spText">{{ item.IsShow == 1 ? item.Time + item.Text : '' }}</view>
							</view>
						</block>
					</view>
				</view>

			</view>

			<view class="heat_body" v-if="details.Type == 0 && sameProductList.length">
				<view class="heatbox">
					<view class="heattextbox">
						<view class="heat_til">相关商品</view>
						<!-- <image class="heat_img"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"></image> -->
						<view class="heat_more"
							@click="nav_to(`/pages/shop/shop_hometown?province=${details.Province}&city=${details.City}&area=${details.Area}`)">
							查看更多</view>
					</view>
					<view class="heat_shop_box">
						<view class="heat_shop" v-for="(item, index) in sameProductList" :key="index"
							@click="nav_to(`/pages/shop/detail?id=${item.ID}`)">
							<image class="heat_spimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
							<view class="heat_spname">{{ item.ProductName }}</view>

							<view class="heat_price_box">
								<view class="heat_price">
									<text class="pr_icon">￥</text>{{ item.Price }}
								</view>
								<view class="heat_payCount">
									已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>

			<view class="heat_body" v-if="details.Type == 1 && details.SubProductList.length">
				<view class="heatbox">
					<view class="heattextbox">
						<view class="heat_til">套餐产品</view>
						<!-- <image class="heat_img"
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"></image> -->

					</view>
					<view class="heat_shop_box">
						<view class="heat_shop" v-for="(item, index) in sameProductList" :key="index"
							@click="nav_to(`/pages/shop/detail?id=${item.ID}`)">
							<image class="heat_spimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
							<view class="heat_spname">{{ item.ProductName }}</view>

							<view class="heat_price_box">
								<view class="heat_price">
									<text class="pr_icon">￥</text>{{ item.Price }}
								</view>
								<view class="heat_payCount">
									已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>


			<view class="specs">
				<view class="specs_info postage" v-if="details.BrandName">
					<view class="specs_title">品牌</view>
					<view class="specs_desc">
						{{ details.BrandName || '--' }}
					</view>
				</view>

				<view class="specs_info" @click="this.$refs.buyNember.open()">
					<view class="specs_title">规格</view>
					<view class="specs_desc">
						{{ stylesList[selectedSpecIndex] }}
					</view>
					<view class="specs_more">
						<image class="more" :src="ossPath + '/upload/1711011951088796.png'" mode="widthFix"></image>
					</view>
				</view>
				<!-- <view class="specs_info postage">
					<view class="specs_title">产地</view>
					<view class="specs_desc" v-if="isCity">
						{{ details.Province || '' }}
						{{ details.City || '' }}
						{{ details.Area || '' }}
						{{ details.Town || '' }}
					</view>
					<view class="specs_desc" v-else>
						原产地
					</view>
				</view> -->
				<!-- <view class="specs_info postage">
					<view class="specs_title">邮费</view>
					<view class="specs_desc">
						{{ details.DeliveryRemark || '包邮' }}
					</view>
				</view>
				<view class="specs_info">
					<view class="specs_title">服务</view>
					<view class="specs_desc">
						{{ details.ServerRemark || '暂无服务信息' }}
					</view>
				</view> -->
				<view class="specs_info postage" v-for="(item, index) in details.ProductAttributes" :key="index">
					<view class="specs_title">{{ item.AttributesName }}</view>
					<view class="specs_desc" @click="goProd(item)">
						{{ item.AttributesValue }}
					</view>
					<view class="specs_more" v-if="item.GoUrl">
						<image class="more" :src="ossPath + '/upload/1711011951088796.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="evalBox">
				<view class="evaluateBox">
					<view class="evaluate" v-for="(item) in productEvalList" :key="item.ID">
						<view class="evaluate_main">
							<view class="evaluate_user">
								<view class="headimg">
									<image :src="item.HeadImgUrl" mode="aspectFill"></image>
								</view>
								<view class="evaluate_info">
									<view class="evaluate_name">
										{{ item.Name || '--' }}

									</view>
									<view class="evaluate_time">
										{{ getTime(item.EvalTime) }}
									</view>
								</view>
							</view>
							<view class="evaluate_box">
								总体：
								<image :src="whatStar(item.EvalScore, i, 0)" mode="" v-for="(el, i) in 5" :key="i">
								</image>
								<text style="margin-left: 10rpx">{{ item.EvalScore }}</text>
							</view>
							<view class="evaluate_text">
								{{ item.Content }}
							</view>
							<view class="evaluate_img" v-if="returnImgList(item.Imgs).length > 0">
								<view class="img" v-for="(el, i) in returnImgList(item.Imgs)" :key="el.ID"
									@click.stop="evaLookImg(item.Imgs, i)">
									<image :src="el" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="allEval" :style="!details.EvalNum ? 'padding-top: 16rpx;' : ''"
					@click="nav_to(`/pages/shop/evaluateList?shopId=${shopId}`)">查看全部评价 ({{ details.EvalNum || 0 }})
				</view>
			</view>

			<view class="product">
				<block
					v-if="!ImgSplitFun(details.CheckReportImgs).length && !ImgSplitFun(details.CertImgs).length && !DayList.length">
					<view class="product_title">
						<view class="product_bar"></view>
						商品详情
						<view class="product_bar"></view>
					</view>
					<block>
						<view class="product_img" v-for="(item, index) in infoList" :key="index">
							<image :src="item.descrip" mode="widthFix"></image>
						</view>
					</block>
				</block>


				<block v-else>
					<view class="product_tab">
						<block v-for="(item, index) in tabList" :key="index">
							<view class="tab_cell" :class="item.title == tabIndex ? 'tab_active' : ''"
								v-if="item.Img.length" @click="changeTab(item)">
								{{ item.title }}
								<view class="videoText" v-if="details.CheckVideo && item.title == '检测报告'">品测视频</view>
							</view>
						</block>
					</view>
					<block v-for="(item, index) in tabList" :key="index">
						<block v-if="tabIndex == item.title">
							<block v-if="item.title != '种养日志'">
								<view class="checkBox" v-if="details.CheckVideo && item.title == '检测报告'">
									<view class="cvBox">
										<view class="cvTop">
											<view class="cvTtile">平台自测</view>
										</view>
										<view class="cvBottom">
											<video class="check_video" :src="details.CheckVideo"></video>
										</view>
									</view>
									<view class="ortherCheck">其他检测</view>
								</view>
								<view class="product_img" v-for="(el, i) in item.Img" :key="i">
									<image :src="el" mode="widthFix"></image>
								</view>
							</block>
							<block v-if="item.title == '种养日志'">
								<view class="contentDiary" v-if="DayList.length">
									<view class="content_cell" v-for="(item, index) in DayList" :key="index">
										<view class="content_time">
											<view class="date_time">
												{{ $util.timeChangeY_MD(item.CreateTime).date }}
											</view>
											<view class="year">
												{{ $util.timeChangeY_MD(item.CreateTime).year }}
											</view>
										</view>
										<view class="content_line">
											<view class="line_round">

											</view>
											<view class="line" v-if="index < 2">

											</view>
										</view>
										<view class="content_main">
											<view class="main_titbox">
												{{ $util.entitiesToUtf16(item.Content) }}
											</view>
											<view class="main_img"
												v-if="ImgSplitFun(item.Imgs).length && !item.IsVideo">
												<view class="img_box" v-for="(el, i) in ImgSplitFun(item.Imgs)"
													:key="index" @click="$util.LookImg(ImgSplitFun(item.Imgs), index)">
													<image :src="el" mode="aspectFill"></image>
												</view>
											</view>
											<view class="main_video"
												v-if="ImgSplitFun(item.Imgs).length && item.IsVideo">
												<block v-for="(el, i) in ImgSplitFun(item.Imgs)" :key="i">
													<video :src="el"></video>
												</block>
											</view>
											<!-- <view class="content_btn">
												<view class="content_btnCell" @click="delDiaryFun(item)">
													删除
												</view>
											</view> -->
										</view>
									</view>
								</view>
							</block>
						</block>
					</block>

				</block>



			</view>
			<!-- <view class="logo_body">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/ads/bottom_logo.png" mode="widthFix"></image>
			</view> -->

			<BtmLogo></BtmLogo>
			<view style="height: 160rpx"></view>

			<view class="payBox">
				<!-- <view class="likes" v-if="!isZan" @click="toggleZan(details.ID)">
					<image :src="zanImageSrc" mode=""></image>
					点赞
				</view>
				<view class="likes liked" v-else>
					<image :src="zanImageSrc" mode=""></image>
					{{ details.ZAN }}
				</view>
				<view class="likes" :class="{ liked: isCollect }" @click="toggleCollect(details.ID)">
					<image :src="collectImageSrc" mode=""></image>
					{{ isCollect ? '已收藏' : '收藏' }}
				</view> -->
				<view class="cart_btn" @click="goShop">
					<image class="cart_img"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327765698301334.png"></image>
					<view class="cart_text">购物车</view>
					<view class="cir_icon" v-if="shoplength">{{ shoplength }}</view>
				</view>
				<!-- <view class="payBtn" @click="payFun(1)">
					<image class="pay_icon"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732776587635734.png"></image>
					<view class="pay_text">赠送</view>
				</view> -->

				<view class="payBtn2" :class="details.Stock ? '' : 'payNot'">
					<block v-if="!isSchool">
						<view class="payBtn_cell" @click="cart_btn(2)">
							<image class="pay_icon"
								src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1739781720696810.png"></image>
							<view class="pay_text">加入购物车</view>
						</view>
						<view class="pay_line" :class="details.Stock ? '' : 'pay_lineNot'"></view>
						<view class="payBtn_cell" @click="payFun(0)">
							<image class="pay_icon"
								src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322437852921000.png"></image>
							<view class="pay_text">立即购买</view>
						</view>
					</block>
					<view class="payBtn_cell" v-else @click="propose()">
						<image class="pay_icon"	
							src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322437852921000.png"></image>
						<view class="pay_text">立即申请</view>
					</view>
				</view>
			</view>
			<jp-signature-popup ref="signatureRef" popup v-model="signatureImg" @change="setAgree" />

			<uni-popup ref="buyNember" type="bottom" border-radius="24">
				<view class="obj_choose">
					<view class="obj_preview">
						<view class="obj_img" @click="lookProductPic()" v-if="selectedStyle && selectedStyle.Images">
							<image :src="selectedStyle.Images || details.Images.split(',')[0]" mode="aspectFill">
							</image>
						</view>
						<view class="obj_info">
							<view class="obj_price">
								<block v-if="selectedStyle.Promotion">
									<view class="obj_price_text">
										单价
									</view>
									<view class="price">
										<view class="dollor">￥</view>
										{{ selectedStyle.Promotion }}
									</view>
									<view class="promotion">
										<view class="dollor">￥</view>
										{{ selectedStyle.Price }}
									</view>
								</block>
								<block v-else>
									<view class="price">
										<view class="dollor">￥</view>
										{{ selectedStyle.Price }}
									</view>
								</block>
							</view>
							<view class="discountBox" v-if="selectedStyle.Discounts > 0">
								<view class="disPrice">已优惠{{ selectedStyle.Discounts }}</view>
							</view>
							<view class="obj_select">
								<text class="obj_selected">已选</text>
								<text class="obj_text">
									{{ selectedStyle.Style }}，{{ quantity }}份
								</text>

							</view>
						</view>
						<view class="obj_close" @tap="closePopup">
							<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721635178667747.png"
								mode=""></image>
						</view>
					</view>
					<view class="obj_head">
						<view class="obj_title">选择规格</view>
						<view class="obj_specs">
							<view class="obj_spec" v-for="(spec, index) in ProductsList" :key="index"
								:class="{ obj_spec1: index === selectedSpecIndex }" @click="selectSpec(index)">
								{{ spec.Style }}
							</view>
						</view>
					</view>
					<view class="obj_body" style="margin: 0;">
						<view class="obj_title">选择数量</view>
						<view class="obj_number">
							<view class="obj_compute minus">
								<image :src="minusImage" mode="" @tap="decrease"></image>
							</view>
							<input type="number" :value="quantity" min="1" max="details.stock"
								@change="handleQuantityChange" />
							<view class="obj_compute plus">
								<image :src="plusImage" mode="" @tap="increase"></image>
							</view>
						</view>
					</view>
					<block v-if="payType == 0">
						<!-- <view class="obj_body">
							<view class="obj_title">是否一键代发</view>
							<view class="obj_number">
								<u-switch activeColor="#ff6030" size="20" :value="switchType==1" @change="setSwitchFun"></u-switch>
							</view>
						</view>
						<view class="obj_tips">
							一键代发: 购买商品后保存至礼品库中由商家统一代发货
						</view> -->
						<view class="address_box" v-if="switchType == 0"
							@click="nav_to('/pages/Myaddress/selectAddress?type=1')">
							<view class="address_cell">
								<view class="icon">
									<image
										src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722933899855827.png"
										mode="aspectFill"></image>
								</view>
								<view class="address_content">
									<view class="cell_name">
										{{ myAddress ? `${myAddress.Accepter} ${myAddress.Phone}` : '请选择收货地址' }}
									</view>
									<uni-icons type="right" size="14"></uni-icons>
								</view>
							</view>
							<view class="address_cell" v-if="myAddress">
								<view class="icon"></view>
								<view class="address_content">
									<view class="cell_name cell_lit">
										{{ myAddress.Province }}{{ myAddress.City }}{{ myAddress.Area || '' }}{{
											myAddress.Address }}
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="gifts_tips">
							请填写快递收件人姓名和收件人电话
						</view>
						<view class="obj_body">
							<view class="obj_title">
								快递收件人
							</view>
							<view class="obj_number obj_inp">
								<input type="text"  v-model="giverName" placeholder="请填写快递收件人名称" />
							</view>
						</view>
						<view class="obj_body" style="margin: 0;">
							<view class="obj_title">
								快递收件人电话
							</view>
							<view class="obj_number obj_inp">
								
								<input type="number"  v-model="giverMobile" placeholder="请填写快递收件人电话" />
							</view>
						</view> -->
					</block>
					<view class="obj_bottom" v-if="payType == 0">
						<view class="obj_left">
							<text v-if="selectedStyle.Promotion">限时优惠：</text>
							<text v-else>合计：</text>
							<view class="obj_total">
								<view class="dollor">￥</view>
								<!-- {{ totalPrice.toFixed(2) }} -->
								{{ selectedStyle.TotalPrice }}
							</view>
						</view>
						<!-- <view class="obj_btn" v-if="signatureImg == '' && isSchool" @click="signAgreement()">签署协议</view> -->
						<view class="obj_btn" v-if="isSchool" @click="propose()">立即申请</view>
						<view class="obj_btn" v-else @click="fetchPay()">立即购买</view>

					</view>
					<view class="obj_bottom" v-else-if="payType == 1">
						<button class="obj_btn" style="width: 100%;" open-type="share">立即赠送</button>
					</view>
					<view class="obj_bottom" v-else>
						<view class="obj_btn2" @click="cart_add()">加入购物车</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="agreementRef" type="center" border-radius="24">
				<view class="agreementBox">
					<view class="agContent">
						<rich-text :nodes="signatureImgContent.Content"></rich-text>
						<view class="sgImgBox">
							<view class="sgImgText">签名：</view>
							<view class="sgImgPic">
								<image v-if="signatureImg != ''" :src="signatureImg" mode="widthFix" />
							</view>
						</view>
						<view class="agSignBox">
							<view class="agSgBtn" @click="openAgree()">签署协议</view>
						</view>
					</view>
					<view class="agBtnBox">
						<view class="agCloseBtn" @click="closeAgree()">{{signatureImg != ''?'我已签署':'关闭'}}</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="wxPopup" type="bottom">
				<view class="wxPopup">
					<view class="tit">
						分享给好友
					</view>
					<view class="wx-main">
						<button class="wx-cell" open-type="share" @click="vxShare()">
							<view class="wx-btn">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1724923293689816.png"
									mode="aspectFill"></image>
							</view>
							<text>微信好友</text>
						</button>
						<button class="wx-cell" @click="drawFun">
							<view class="wx-btn">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1724923312810631.png"
									mode="aspectFill"></image>
							</view>
							<text>生成海报</text>
						</button>
					</view>
				</view>
			</uni-popup>
		</block>


	</view>
</template>

<script>
import { data } from 'uview-ui/libs/mixin/mixin';

export default {
	data() {
		return {
			shopId: null,
			load: false,
			ossPath: null,
			details: {},
			farInfo: {},
			specImg: '', // 弹窗上面的图片
			bannerList: [],
			infoList: [],
			isZan: 0, // 点赞状态
			isCollect: 0, // 收藏状态
			quantity: 1, // 目前的预定购买数量
			stock: 0, // 库存（对比可购买量）
			stylesList: [], // 选择规格（只有规格）
			ProductsList: [], // 规格（所有信息）
			selectedSpecIndex: 0, // // 当前选定的规格
			selectedStyle: {}, // 规格（选定的规格的所有信息））
			tagsArray: [], // tags标签
			itemStr: {},

			switchType: 0,//是否一键代发
			myAddress: {},
			payType: 0,//0购买 1赠送
			onlyKey: '',
			user: {},
			Qr: '',
			shoplength: 0,
			sharetips: '',
			productEvalList: [],//商品评论列表

			personList: [],
			currentIndex: 0,

			sameProductList: [],

			tabList: [],
			tabIndex: '商品详情',
			downTime: '',
			downTimeFn: null,
			timeLine: [],
			DayList: [],
			isSchool: false,
			signatureImg: '',
			signatureImgContent: {
				Content:'',
				ID:1,
			},
		};
	},
	computed: {
		zanImageSrc() {
			return this.isZan === 1
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721614383994465.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721614368051116.png';
		},
		collectImageSrc() {
			return this.isCollect === 1
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17216144146531433.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721614396475655.png';
		},
		minusImage() {
			return this.quantity > 1
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162992121443.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162990142299.png';
		},
		plusImage() {
			return this.quantity < this.stock
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629860962316.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629877490898.png';
		},
		totalPrice() {
			if(!this.selectedStyle){
				return 0
			}
			if (this.selectedStyle && this.selectedStyle.Promotion) {
				return this.selectedStyle.Promotion * this.quantity
			} else {
				return this.selectedStyle.Price * this.quantity;
			}
		},
		isCity() {
			let con = this.details
			if (!con.Province && !con.City && !con.Area && !con.Town) return false
			return true
		}
	},
	watch: {},

	async onLoad(e) {
		this.ossPath = this.$ossPath;
		if (e.id) {
			this.shopId = e.id;
		} else if (e.scene) {
			console.log("sence====" + e.scene);
			this.shopId = e.scene;
		}
		await this.getDetails(this.shopId);
		this.SamePlaceProductList()
		this.getShopPrice()
		this.getQrFun()
		this.getMyAddress()
		uni.$on('select', data => {
			this.myAddress = data
		})
		this.MyCart()
		// this.GrowList()
	},

	async onShow() {
		this.getUserInfo()
		this.SaleLogs()

		// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>',this.$util.getCounTdown());
	},

	onUnload() {
		uni.$off('select')
		clearInterval(this.downTimeFn)
	},

	async onShareAppMessage(res) {
		// if (res.from == 'button') {
		// await this.giveWXfriends();
		let pid = uni.getStorageSync('user').UserID;
		let shareTitle = `${uni.getStorageSync('user').Name}向你分享了${this.details.ProductName}`;
		let sharePath = `pages/shop/detail?id=${this.details.ID}&pid=${pid}`;
		let imageUrl = this.specImg;
		return {
			title: shareTitle,
			path: sharePath,
			imageUrl: imageUrl
		}
		// }

	},

	//分享朋友圈
	onShareTimeline() { },

	methods: {
		goProd(e) {
			if (e.GoUrl) {
				this.nav_to(e.GoUrl)
			}
		},
		async GrowList() {
			let res = await this.$api.post('ProductTrack/GrowList', {
				ProductID: this.shopId
			})
			if (res.code == 0) {
				this.DayList = res.data || []
			} else {
				this.$u.toast(res.message)
			}
			this.getTabList()
		},
		ImgSplitFun(img) {
			// if (img) {
			// 	return img.split(',')
			// }
			if (img) {
				if (img.includes("[")) {
					return JSON.parse(img)
				} else {
					return img.split(',')
				}
			}
			return []
		},
		changeTab(item) {
			this.tabIndex = item.title
		},
		getPayCount(item) {
			return item > 1000 ? (item / 1000).toFixed(1) + 'k' : item > 1000000 ? (item / 1000000).toFixed(1) + 'M' : item > 100000000 ? (item / 100000000).toFixed(1) : item
		},
		async SaleLogs() {
			let res = await this.$api.post('Products/SaleLogs', { ProductID: this.shopId })
			this.personList = res.data || []
		},
		async SamePlaceProductList() {
			let res = await this.$api.post('Products/SamePlaceProductList', {
				PageIndex: 1,
				PageSize: 4,
				Province: this.details.Province,
				City: this.details.City,
				Area: this.details.Area
			})
			this.sameProductList = res.data || []

		},
		personChange(e) {
			this.currentIndex = e.detail.current
		},
		goShop() {
			uni.switchTab({
				url: '/pages/tab/shop_cart'
			})
		},
		vxShare() {
			this.$refs.wxPopup.close()
			this.sharetips = '分享'
		},
		async MyCart() {
			let res = await this.$api.post('ShopCart/MyCart', {
			})
			if (res.code == 0) {
				// this.shoplength = res.data.length
				for (let i = 0; i < res.data.length; i++) {
					for (let j = 0; j < res.data[i].Item.length; j++) {
						this.shoplength += 1
					}

				}
			}
		},
		//加入购物车
		async cart_add() {
			let res = await this.$api.post('ShopCard/Add', {
				ProductID: this.details.ID,
				Qty: this.quantity,
				ProductStyle: this.selectedStyle.Style,
				Price: this.selectedStyle.Promotion > 0 ? this.selectedStyle.Promotion : this.selectedStyle.Price,
				ProductImgs: this.details.Images.split(',')[0],
				Discounts: this.selectedStyle.Discounts,
				SKUID: this.selectedStyle.ID,
				Promotion: this.selectedStyle.Promotion,
			})
			if (res.code == 0) {
				this.$pv.msg('加入成功')
				this.$refs.buyNember.close();
				this.shoplength += 1
			} else {
				this.$pv.msg(res.message)
			}
		},
		async getUserInfo() {
			let res = await this.$api.post('/User/GetUserInfo', { ID: uni.getStorageSync('user').UserID });
			this.user = res.data;
		},
		async getQrFun() {
			let res = await this.$api.post('/Product/CreateShareQR', {
				Page: 'pages/shop/detail',
				EventID: this.details.ID
			})
			this.Qr = res.data
		},
		async drawFun() {
			this.$u.toast('暂未开放')
			return

			let data = {
				HeadImgUrl: this.user.HeadImgUrl,
				Name: this.user.Name,
				Qr: this.Qr,
				...this.details
			}
			this.$store.commit('setShopCanvas', data)
			this.nav_to('/pages/shop/canvas')
			this.$refs.wxPopup.close()
		},
		lookimg(item, index) {
			let urls = this.bannerList.map(item => item.Banner)
			uni.previewImage({
				urls,
				current: index,
			})
		},
		lookProductPic() {
			let urls = this.selectedStyle.Images || this.details.Banner
			uni.previewImage({
				urls: [urls],
				fail: (err) => {
					console.log(err);
				}
			})
		},
		cart_btn(val) {
			if (this.details.Stock <= 0) {
				this.$pv.msg('库存不足')
				return
			}
			this.payType = val
			this.$refs.buyNember.open()
		},
		payFun(val) {
			if (this.details.Stock <= 0) {
				this.$pv.msg('库存不足')
				return
			}
			this.payType = val
			this.$refs.buyNember.open()
		},
		setSwitchFun(e) {
			this.switchType = e ? 1 : 0
		},
		async getMyAddress() {
			let res = await this.$api.post('UserAddress/MyDefaultAddress')
			this.myAddress = res.data || false
		},
		// 赠送微信好友
		async giveWXfriends() {
			// 新建赠送批次接口
			let res = await this.$api.post('/SendGift/Add', {
				ProductID: this.selectedStyle.ProductID,
				ProductStyle: this.selectedStyle.Style,
				Qty: this.quantity,
				// Price: this.totalPrice,
				Price: this.selectedStyle.TotalPrice,
				title: '',
				SenderName: '',
				SenderMobile: '',
				IsSingleSend: 2
			});
			if (res.code === 0) {
				this.onlyKey = res.data
			} else {
				this.$pv.msg(res.message)
			}
		},
		// 获取商品详细信息
		async getDetails(id) {
			let res = await this.$api.post('/Products/Detail', {
				ID: id,
			});

			if (res.code == 0) {
				this.details = res.data;
				this.isZan = res.data.IsZAN;
				this.isCollect = res.data.IsCollect;
				this.stock = res.data.Stock;
				this.productEvalList = res.data.ProductEvalList
				this.bannerList = this.details.Images.split(',').map((image) => ({
					Banner: image.trim(),
				}));
				this.stylesList = res.data.ProductStyleList.map((item) => item.Style);
				this.ProductsList = res.data.ProductStyleList;
				this.selectedStyle = res.data.ProductStyleList[0];
				if(this.details.Tags && this.details.Tags.length){
					this.tagsArray = this.details.Tags.split(',').map((tag) => tag.trim());
				}
				this.infoList = this.details.Description ? this.details.Description.split(',').map((image) => ({
					descrip: image.trim(),
				})) : [];
				this.specImg = res.data.Images.split(',')[0];
				// console.log(res.data, '==================detail----res.data');
				this.timeLine = res.data.TimeLIne
				this.isSchool = res.data.Type == 1
				if (this.isSchool) {
					// this.getContent()
				}
				await this.getFarmerInfo(res.data.ShopID);
				this.load = true;

				// this.details.CheckReportImgs = 'http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/abc761cdfc8c4f27bc20259ba89d138a.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/9d89c6a4d07c470bbbaf3dd1ca077db6.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/25ee7c4aa26142e5bfe229615f850da7.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/10e174f7d610477aaccbaac0ffbb9879.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/4f4adc92e94a42ad9fb19a2a7184c373.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/64f6d1c610114d5786290af571ab5fc3.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/4705691c36434dd28639167298a546ee.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/6b92908f8aa946048c4fb7336b672f2f.jpg'

				// this.details.CertImgs = 'http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/f20054d0b5d34532bcf2365d753d34bd.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/25a4eed410e447a18632c2cdb0e05e48.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/aed6fb3cae3c430da13e46b99734a1e4.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/2d7dd8e6dfb84d9caa1e5e001324c380.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/44441f9629e14358be305735038e15e1.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/a40ca062d24c4359801b43f783c4f9ec.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/d8da7b7037a6466080f86e947b6d83f7.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/5d6e1fe5264046aa82e452ac20d4c9c2.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/32c1094d281f4ec89d894eb333daa49d.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/856b318db83f4e09a1e42bd746cbc317.jpg,http://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/9f6a794c87e2405eb9c14e4dc2f711d7.jpg'
				this.getTabList()

				this.CounTdownFun()
			}
		},
		async getContent() {
			const that = this
			let res = await this.$api.post('/Shops/GetContact', {
				ShopID: that.details.ShopID,
				ProductID: that.details.ID
			})
			if (res.code == 0) {
				this.signatureImgContent = res.data
			}
		},
		CounTdownFun() {
			let distance = this.$util.TimeDiff(this.details?.ProductLimitPromotion?.PromotionDealTime)
			this.downTime = Number(distance)
			this.downTimeFn = setInterval(() => {
				this.downTime = Number(this.downTime) - 1000
			}, 1000)
		},
		async GetBanner() {
			let res = await this.$api.post('/Banner/GetBanner', {
				PageKey: 'bottom_logo'
			})
		},
		getTabList() {

			let shopDetails = this.ImgSplitFun(this.details.Description)
			let detection = this.ImgSplitFun(this.details.CheckReportImgs)
			let certificate = this.ImgSplitFun(this.details.CertImgs)


			this.tabList = [
				{
					title: '商品详情',
					Img: shopDetails
				},
				{
					title: '检测报告',
					Img: detection
				},
				{
					title: '资质证书',
					Img: certificate
				},
				{
					title: '种养日志',
					Img: this.DayList
				},
			]
		},
		propose(){
			this.nav_to('/pages/vip/vipGet?ServerComboID='+ this.details.ServerComboID)
		},
		signAgreement() {
			if (this.switchType == 0 && !this.myAddress) {
				this.$pv.msg('请选择收货地址')
				return
			}
			this.$refs.buyNember.close()
			this.$refs.agreementRef.open()

		},
		closeAgree() {
			this.$refs.agreementRef.close()
			this.$refs.buyNember.open()
		},
		openAgree() {
			this.$refs.signatureRef.toPop()
		},
		async setAgree(val) {
			const r = await this.$upload(val, async (pro) => {});
			this.signatureImg = r
		},
		// 下单购买
		async fetchPay() {
			if (this.switchType == 0 && !this.myAddress) {
				this.$pv.msg('请选择收货地址')
				return
			}
			let _this = this;
			_this.itemStr = {
				...this.details.ProductStyleList[this.selectedSpecIndex],
				Qty: this.quantity,
			};
			_this.itemStr.Price = _this.itemStr.Promotion || _this.itemStr.Price
			console.log(_this.itemStr);

			const url = this.switchType == 0 ? '/Order/Submit' : '/Order/Purchase'
			let params;
			if (this.switchType == 0) {
				params = {
					ShopID: this.details.shopId, // 商户ID
					// Price: this.totalPrice, // 订单总额
					Price: this.selectedStyle.TotalPrice,
					CouponNo: '', // 优惠券编号
					Discounts: '', // 折扣 如果有优惠券抵
					Remark: '', // 订单备注扣，则有
					ItemStr: JSON.stringify([_this.itemStr]), // 订单明细 Json字符串
					Delivery_Accepter: this.myAddress.Accepter,
					Delivery_Phone: this.myAddress.Phone,
					Delivery_Province: this.myAddress.Province,
					Delivery_City: this.myAddress.City,
					Delivery_Address: this.myAddress.Address,
					SignNameImg:_this.signatureImg,
					ContactID:_this.signatureImgContent.ID
				}
			} else {
				params = {
					ShopID: this.details.shopId, // 商户ID
					Price: this.selectedStyle.TotalPrice,
					// Price: this.totalPrice, // 订单总额
					CouponNo: '', // 优惠券编号
					Discounts: '', // 折扣 如果有优惠券抵
					Remark: '', // 订单备注扣，则有
					SignNameImg:_this.signatureImg,
					ItemStr: JSON.stringify([_this.itemStr]), // 订单明细 Json字符串
				}
			}

			let res = await this.$api.post(url, params)

			if (res.code == 0) {
				// 支付订单接口
				let response = await this.$api.post('/Payment/PayV2', {
					EventType: res.data.EventType,
					EventID: res.data.EventID,
					SourcePage: 'pages/shop/detail',
					PayChannel: 'weixin',
				});

				if (response.code == 0) {
					let payObj = JSON.parse(response.data);
					// console.log(payObj, '==================PayV2----res.data')

					uni.requestPayment({
						provider: 'wxpay',
						// #ifdef MP-WEIXIN
						timeStamp: payObj.timeStamp,
						nonceStr: payObj.nonceStr,
						package: payObj.package,
						signType: payObj.signType,
						paySign: payObj.paySign,
						// #endif
						success: async function (res) {
							_this.$pv.msg('支付成功');

							let toSuccess = {
								..._this.itemStr,
								video: _this.farInfo.GX_Video,
								productName: _this.details.ProductName,
								coverImg: _this.specImg,
							}; //8.3·因为胡某有个新想法就是待会在购买成功页面他想直接送给朋友，要调新建赠送批次接口，这里用vuex把产品参数带过去
							_this.$store.commit('setPaySuccess', toSuccess);

							setTimeout(() => {
								_this.$refs.buyNember.close();
								_this.nav_to(`/pages/shop/paySuccess?shopName=${_this.farInfo.ShopName}`);
							}, 200);
						},
						fail: function (err) {
							_this.$pv.msg('您已取消支付');
						},
					});
				} else if (response.code == 999) {
					setTimeout(() => {
						_this.$refs.buyNember.close();
						_this.nav_to(`/pages/shop/paySuccess?shopName=${_this.farInfo.ShopName}`);
					}, 200);
				}
			}
		},

		// 获取商户信息
		async getFarmerInfo(id = 0) {
			let shopid = id == 0 ? this.details.ShopID : id;
			let res = await this.$api.post('/Shop/Detail', {
				ID: shopid,
			});
			// console.log(res, '==================res');
			if (res.code == 0) {
				this.farInfo = res.data;
			}
		},

		closePopup() {
			this.$refs.buyNember.close();
			setTimeout(() => {
				this.quantity = 1;
			}, 1000);
		},

		async decrease() {
			if (this.quantity > 1) {
				const yes = await this.getShopPrice(this.quantity - 1)
				if (yes) {
					this.quantity--;
				}

			}
		},
		async increase() {
			if (this.quantity < this.stock) {
				const yes = await this.getShopPrice(this.quantity + 1)
				if (yes) {
					this.quantity++;
				}

			}
		},
		handleQuantityChange(event) {
			this.quantity = Math.max(1, Math.min(event.target.value, this.stock));
		},

		// 选择规格
		selectSpec(index) {
			this.selectedSpecIndex = index; //更改点击的规格成为新的选定规格
			this.selectedStyle = this.ProductsList[index];
		},

		// 改变点赞状态
		async toggleZan(id) {
			if (this.isZan === 0) {
				this.isZan = 1;
				const response = await this.$api.post('/Products/ZAN', {
					ID: id,
				});
				if (response.code === 0) {
					console.log('点赞状态已更新');
				} else {
					this.isZan = 0; // 回滚状态
					console.error('点赞状态更新失败');
				}
			}
		},

		// 改变收藏状态
		async toggleCollect(id) {
			let endpoint = '/Products/Collect';
			if (this.isCollect == 1) {
				endpoint = '/Products/DeleteCollect';
			}
			const response = await this.$api.post(endpoint, {
				ProductID: id,
			});
			if (response.code === 0) {
				console.log('收藏状态已更新');
			} else {
				this.isCollect = this.isCollect === 0 ? 1 : 0;
				console.error('收藏状态更新失败');
			}
			this.getDetails(id);
		},
		//判断是已灰色星星还是黄色（选中）状态的星星 num:分数 lindex:判断是否是总体，如果是为0 否为1,sindex:当前是第几颗星星
		whatStar(num = 0, sindex, lindex = 1) {
			let staring;
			let starhalf;
			let stared;
			if (lindex == 0) {
				//总体高亮
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853354322424.png';
				//总体半亮
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853365936666.png';
				//总体灰色
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138537770581315.png';
			} else {
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533786641363.png';
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533895031496.png';
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853790278774.png';
			}

			const starNum = sindex + 1;
			return num - starNum >= 0 ? staring : num - starNum == -0.5 ? starhalf : stared;
		},
		returnImgList(img) {
			let list = img == '' ? [] : img.split(',');
			return list
		},
		evaLookImg(imgs, index) {
			let urls = this.returnImgList(imgs);
			uni.previewImage({
				urls,
				current: index
			});
		},
		// 获取价格
		async getShopPrice(num = 1) {
			return new Promise(async (resolve, reject) => {
				const that = this
				const res = await this.$api.post('/Products/GetProductPromotion', {
					ProductID: that.details.ID,
					Qty: num
				});
				const { code, data, msg } = res
				if (code == 0) {
					that.details.ProductStyleList = data
					that.ProductsList = data;
					that.selectedStyle = data[that.selectedSpecIndex]

					resolve(true)
				} else {
					that.$pv.msg(msg)
					resolve(false)
				}

			});

		},
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

/* 定义关键帧 */
@keyframes spin {
	from {
		opacity: 0;
		/* 从0度开始 */
	}

	to {
		opacity: 1;
		/* 旋转到360度，即一圈 */
	}
}

.topSwiper {
	width: 100%;
	height: 670rpx;
	height: 750rpx;
	position: relative;

	.person_shopMain {
		width: calc(100vw - 48rpx);
		height: 58rpx;
		position: absolute;
		top: 60rpx;
		left: 24rpx;
		z-index: 9;

		.person_shop {
			display: flex;
			align-items: center;
			padding: 8rpx 14rpx;
			border-radius: 50rpx;
			background-color: rgba(0, 0, 0, 0.6);
			width: fit-content;
			max-width: 85%;


			image {
				width: 40rpx;
				height: 40rpx;
				min-width: 40rpx;

				border-radius: 50%;
				margin-right: 8rpx;
			}

			.person_tips {
				font-size: 24rpx;
				color: #f1f1f1;
				flex: 1;
				overflow: hidden;
				/*超出部分隐藏*/
				white-space: nowrap;
				/*禁止换行*/
				text-overflow: ellipsis;
				/*省略号*/
			}
		}

		.person_Animation {
			animation: spin 1.5s linear;
		}
	}

	.swiperBox {
		width: 100%;
		height: 100%;
		position: relative;

		swiper {
			width: 100%;
			height: 100%;
		}

		.nullimg_box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.6);

			image {
				width: 50%;
				height: 50%;
			}
		}

		.bannerImageBox {
			width: 100%;
			height: 100%;

			.adverimg {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	/* 默认指示点的样式 */
	.swiper-box,
	.wx-swiper-dot {
		width: 16rpx;
		height: 10rpx;
		background: #ffffff;
		border-radius: 12rpx !important;
	}

	/* 选中指示点的样式 */
	.swiper-box,
	.wx-swiper-dot.wx-swiper-dot-active {
		width: 48rpx;
		height: 10rpx;
		background: #ff720f;
		border-radius: 12rpx !important;
	}
}

.good {
	width: 100%;
	overflow: hidden;
	padding-top: 20rpx;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;

	.good_info {
		display: flex;
		justify-content: space-between;

		.good_price {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.proTypeBox {
				height: 36rpx;
				border-radius: 8rpx;
				border: 1rpx solid #f91c1c;
				font-weight: 500;
				font-size: 20rpx;
				color: #f91c1c;
				margin: 5rpx;
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				margin-right: 10rpx;
			}

			.proEmpty {
				margin-left: 30rpx;
			}

			.good_newPrice {
				font-weight: bold;
				font-size: 45rpx;
				color: #fc394b;
				line-height: 60rpx;
				// margin: 0 30rpx;
				display: flex;
				align-items: baseline;

				.dollor {
					font-size: 30rpx;
					color: #fc394b;
				}
			}

			.good_oldPrice {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 70rpx;
				text-decoration-line: line-through;
				margin-left: 10rpx;
			}
		}

		.good_tags {
			font-weight: 500;
			font-size: 24rpx;
			height: 34rpx;
			line-height: 70rpx;
			margin: 10rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.good_tag {
				margin: 0 5rpx;
				color: #666666;
			}
		}
	}

	.good_name {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		// text-indent: 30rpx;
	}

	.good-titbox {
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.good_name {
			flex: 0.85;
		}

		.icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.good_labels {
		display: flex;
		margin: 15rpx 0 0 30rpx;

		.good_label {
			// width: 104rpx;
			height: 36rpx;
			border-radius: 8rpx;
			border: 1rpx solid #f91c1c;
			font-weight: 500;
			font-size: 20rpx;
			color: #f91c1c;
			margin: 5rpx;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.sellProgress {
		width: 100%;
		padding: 0 32rpx;

		.spBox {
			width: 100%;
			display: flex;
			align-items: center;

			.spCell {
				flex: 1;
				height: 120rpx;
				position: relative;

				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;
				&:nth-child(1) {
					.spPro {
						border-top-left-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
					}
				}

				&:last-child {
					.spPro {
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
					}

					.spText {
						left: 100%;
						transform: translateX(-100%);
					}
				}

				.spPrice {
					position: absolute;
					left: 0;
					top: 0;
					font-size: 24rpx;
					height: 40rpx;
					display: flex;
					justify-content: end;
					align-items: flex-end;
				}

				.spPro {
					margin-top: 40rpx;
					height: 40rpx;
				}

				.spText {
					position: absolute;
					left: 0;
					bottom: 0;
					height: 40rpx;
					font-size: 20rpx;
					overflow: visible;
					white-space: nowrap;
				}
			}
		}
	}

	.farmerInfo {
		width: 100%;
		padding: 22rpx 30rpx 32rpx 30rpx;

		.farmerbox {
			width: 100%;
			background: linear-gradient(151deg, #ffad26 0%, #fe4e01 100%, #fe4e01 100%);
			border-radius: 16rpx;
			padding: 8rpx;

			.fbTop {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 8rpx;

				image {
					width: 100%;
					display: block;
				}

				.fbTopLeft {
					width: 212rpx;
				}

				.fbTopRight {
					display: flex;
					align-items: center;

					.fbTopTest {
						font-weight: 500;
						font-size: 24rpx;
						color: #ffffff;
					}

					.fbTopArrow {
						width: 24rpx;
						margin-left: 3rpx;
						padding-top: 3rpx;
					}
				}
			}

			.fbCenter {
				width: 100%;
				padding: 16rpx 24rpx;
				background-color: white;
				border-radius: 8rpx;

				.fbcText {
					width: 100%;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					padding: 16rpx 0;
					display: flex;
					align-items: center;

					.fbcTitle {
						font-size: 28rpx;
						color: #666666;
						margin-right: 16rpx;
					}

					.evaluate_box {
						display: flex;
						align-items: center;
						font-size: 26rpx;

						image {
							padding: 4rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
			}
		}
	}
}

.specs {
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;

	.specs_info {
		display: flex;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		height: 80rpx;
		background-color: #ffffff;

		.specs_title {
			color: #999999;
			// width: 100rpx;
			// width: 15%;
			padding: 0 26rpx;
			text-align: center;
		}

		.specs_desc {
			color: #333333;
			overflow: hidden;
			// width: 75%;
			flex: 1;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*禁止换行*/
			text-overflow: ellipsis;
			/*省略号*/

		}

		.specs_more {
			width: 10%;
			display: flex;
			align-items: center;

			.more {
				width: 40rpx;
			}
		}
	}

	.postage {
		border-top: 1rpx solid #eeeeee;
		border-bottom: 1rpx solid #eeeeee;
	}
}

.evalBox {
	margin-top: 20rpx;
	background-color: white;

	.allEval {
		font-size: 24rpx;
		padding: 16rpx 26rpx;
		color: #999999;
		padding-top: 0;
		text-align: center;
	}

	.evaluateBox {
		width: 100%;

		.evaluate {
			padding: 10rpx 26rpx;

			.evaluate_main {
				border-radius: 16rpx;
				// background-color: #2e2e2e;
				padding: 10rpx 26rpx;
			}

			.evaluate_user {
				display: flex;

				.headimg {
					margin-right: 20rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}

				.evaluate_info {
					.evaluate_name {
						display: flex;
						align-items: center;
						margin-right: 10rpx;

						.member {
							min-width: 90rpx;
							height: 32rpx;
							background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
							border-radius: 2rpx;
							border: 2rpx solid #d6c6ab;
							text-align: center;
							color: #fff !important;
							font-size: 16rpx;
							line-height: 32rpx;
							margin-left: 10rpx;
						}

						.member_huan {
							color: #333 !important;
							background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
							border: 2rpx solid #e6ceb5;
						}

						.member_hei {
							color: #4c310c;
							background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
							border: 2rpx solid #e6ceb5;
						}

						.member_hei_vip {
							color: #4c310c;
							background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
							border: 2rpx solid #e6ceb5;
						}

						.member_wealth {
							width: 45rpx;
							height: 32rpx;
							background: linear-gradient(135deg, #deb214 0%, #f88410 100%);
							border-radius: 2rpx;
							border: 2rpx solid #d6c6ab;
							text-align: center;
							color: #fff;
							font-size: 16rpx;
							line-height: 32rpx;
							margin-left: 5rpx;
						}
					}

					.evaluate_time {
						margin-top: 6rpx;
						color: #999999;
						font-size: 22rpx;
					}
				}
			}

			.evaluate_box {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 10rpx;

				image {
					padding: 4rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}

			.evaluate_litbox {
				margin: 10rpx auto;
				display: flex;
				align-items: center;

				.eva_lit {
					margin-right: 14rpx;
					font-size: 22rpx;
				}
			}

			.evaluate_text {
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.evaluate_img {
				display: flex;
				flex-wrap: wrap;

				.img {
					border-radius: 16rpx;
					width: 140rpx;
					height: 140rpx;
					overflow: hidden;
					margin-right: 28rpx;
					margin-bottom: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.img:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		.empty {
			// background: #111;
			min-height: 500rpx;
		}

		.btm {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 144rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
			display: flex;
			justify-content: space-between;

			.btn1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
				border-radius: 12rpx;

				image {
					height: 40rpx;
					width: 40rpx;
					margin-right: 8rpx;
				}

				text {
					color: #4c310c;
					font-size: 34rpx;
					text-shadow: 0px 2px 2px rgba(141, 107, 62, 0.7);
				}
			}

			.btn2 {
				width: 320rpx;
				//width: 100%;
				height: 96rpx;
				background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 40rpx;
					width: 40rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 34rpx;
					color: #1f1f1f;
					line-height: 34px;
					text-shadow: 0px 2px 2px rgba(132, 108, 82, 0.8);
				}

				.red_tips {
					width: 134rpx;
					height: 50rpx;
					border-radius: 18rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #fd4c61;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: -158rpx;
					margin-top: -88rpx;
				}
			}
		}
	}
}

.product {
	width: 100%;
	background-color: #ffffff;
	margin-top: 20rpx;

	.product_title {
		height: 100rpx;
		width: 100%;
		font-size: 28rpx;
		color: #0d0d0d;
		display: flex;
		align-items: center;
		justify-content: center;

		.product_bar {
			width: 114rpx;
			height: 1rpx;
			border: 1rpx solid #e4e4e4;
			margin: 0 20rpx;
		}
	}

	.product_tab {
		width: 100%;
		display: flex;
		align-items: center;

		.tab_cell {
			width: 50%;
			height: 88rpx;
			font-size: 28rpx;
			color: #0d0d0d;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.videoText {
				position: absolute;
				right: 0;
				top: 4rpx;
				background-color: #5d8bf8;
				font-size: 18rpx;
				color: white;
				padding: 5rpx 15rpx;
				border-radius: 25rpx 25rpx 25rpx 0;
				transform: translateX(30%);
			}
		}

		.tab_active {
			position: relative;
			color: #5d8bf8;
			font-weight: bold;

			&::before {
				content: '';
				position: absolute;
				content: '';
				left: 50%;
				bottom: 8rpx;
				transform: translate(-50%, 0);
				width: 15%;
				height: 8rpx;
				background: #5d8bf8;
				border-radius: 5rpx;
			}
		}
	}

	.checkBox {
		width: 100%;
		padding: 0 12rpx;

		.cvBox {
			background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 24rpx;
			margin-top: 20rpx;

			.cvTop {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 18rpx 22rpx;
				box-sizing: border-box;

				.cvTtile {
					font-size: 26rpx;
					font-weight: bold;
					margin-right: 8rpx;
				}
			}

			.cvBottom {
				width: 100%;
				padding: 12rpx;
			}
		}


		.check_video {
			width: 100%;
		}

		.ortherCheck {
			font-size: 30rpx;
			font-weight: bold;
			margin: 10rpx 0;
		}
	}

	.product_img {
		width: 100%;

		image {
			width: 100%;
			display: block;
		}
	}
}

.payBox {
	position: fixed;
	width: 100%;
	// height: 168rpx;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	padding: 20rpx 30rpx 50rpx 30rpx;
	background-color: #fefefe;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	// justify-content: space-between;

	.likes {
		margin: 0 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.liked {
		color: #ff6030;
	}

	.cart_btn {
		width: 80rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		margin-right: 44rpx;
		position: relative;

		.cart_img {
			width: 50rpx;
			height: 48rpx;
		}

		.cart_text {
			font-size: 24rpx;
		}

		.cir_icon {
			// padding: 10rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: red;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
			position: absolute;
			right: -8rpx;
			top: -14rpx;
		}
	}

	.payBtn {
		width: 50rpx;
		// height: 88rpx;
		// background: #20B11D;
		// border-radius: 44rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;

		.pay_icon {
			width: 40rpx;
			height: 40rpx;
		}

		.pay_text {
			font-size: 24rpx;
		}
	}

	.payBtn2 {
		// width: 502rpx;
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		border-radius: 24rpx;
		overflow: hidden;
		background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
		background: linear-gradient(98deg, #fad85b 0%, #B98B51 100%);
		.pay_line {
			height: 100%;
			width: 2rpx;
			background-color: #B98B51;
		}

		.pay_lineNot {
			background-color: #eee;
		}

		.payBtn_cell {
			flex: 1;
			height: 100%;
			// margin: 0px 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.pay_icon {
				width: 36rpx;
				height: 36rpx;
			}

			.pay_text {
				font-size: 28rpx;
				color: #ffffff;
				margin-left: 8rpx;
			}
		}

	}

	.payNot {
		background: #ccc;
	}
}

.obj_choose {
	width: 100%;
	// height: 948rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	background-color: #fff;
	padding-bottom: 200rpx;
	position: relative;

	.obj_preview {
		display: flex;
		justify-content: space-between;

		.obj_img {
			width: 176rpx;
			height: 176rpx;
			overflow: hidden;
			border-radius: 5rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.obj_info {
			// padding-top: 74rpx;
			width: 65%;
			min-height: 176rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.obj_price {
				font-size: 48rpx;
				color: #f91c1c;
				font-weight: bold;
				line-height: 66rpx;
				display: flex;
				align-items: baseline;

				.obj_price_text {
					color: #f91c1c;
					font-weight: bold;
					font-size: 22rpx;
				}

				.price {
					display: flex;
					color: #f91c1c;

					.dollor {
						font-size: 35rpx;
						color: #f91c1c;
					}
				}

				.promotion {
					display: flex;
					font-size: 28rpx;
					color: #ccc;
					text-decoration: line-through;
					margin-left: 14rpx;

					.dollor {
						font-size: 28rpx;
						color: #ccc;
					}
				}
			}

			.discountBox {
				width: 100%;
				display: flex;

				.disPrice {
					border: 2rpx solid #ff6030;
					color: #ff6030;
					font-size: 20rpx;
					padding: 4rpx 14rpx;
					border-radius: 10rpx;
				}
			}

			.obj_select {

				// line-height: 40rpx;
				display: inline-block;

				text {
					font-size: 28rpx;
				}

				.obj_selected {
					color: #999999;
					margin-right: 15rpx;
				}

				.obj_text {
					flex: 1;
					color: #333333;
				}
			}
		}

		.obj_close {
			width: 40rpx;
			height: 40rpx;
			background: #eeeeee;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.obj_head {
		display: flex;
		flex-direction: column;
		margin: 30rpx 0;

		.obj_title {
			font-size: 28rpx;
			color: #0d0d0d;
			font-weight: bold;
		}

		.obj_specs {
			// display: flex;
			margin: 20rpx 0 20rpx -10rpx;
			max-height: 270rpx;
			overflow-y: scroll;

			.obj_spec {
				max-width: max-content;
				height: 56rpx;
				padding: 0px 25rpx;
				background: #f2f2f2;
				border: 2rpx solid #f2f2f2;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #0d0d0d;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;
				margin-bottom: 10rpx;
			}

			.obj_spec1 {
				color: #4C310C;
				background: linear-gradient(134deg, #fef9ef 0%, #fff4e3 100%);
				border: 4rpx solid #ffe4c3;        
			}
		}
	}

	.gifts_tips {
		font-size: 28rpx;
		color: #666666;
	}

	.obj_body {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.obj_title {
			font-size: 28rpx;
			color: #0d0d0d;
			font-weight: bold;
		}

		.obj_number {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 120rpx;
			height: 40rpx;

			.obj_compute {
				width: 66rpx;
				height: 66rpx;
				margin: 0px 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80%;
					height: 80%;
				}
			}

			input {
				width: 110rpx;
				background: #f2f2f2;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				color: #0d0d0d;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

		.obj_inp {
			width: 60%;

			input {
				width: 100%;
				background-color: transparent;
				font-size: 28rpx;
				color: #000;
				text-align: right;
			}

			.input-placeholder {
				font-size: 28rpx;
			}
		}
	}

	.obj_tips {
		font-size: 24rpx;
		color: #999999;
		margin: 4rpx 0 20rpx 0;
	}

	.obj_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 70rpx;
		left: 0;
		width: 100%;
		padding: 0rpx 40rpx;

		.obj_left {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #333333;
			}

			.obj_total {
				font-size: 48rpx;
				color: #f91c1c;
				font-weight: bold;
				display: flex;
				align-items: center;

				.dollor {
					font-size: 35rpx;
					color: #f91c1c;
				}
			}
		}

		.obj_btn {
			font-size: 32rpx;
			color: #ffffff;
			width: 272rpx;
			height: 88rpx;
			// background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
			background: linear-gradient(98deg, #fad85b 0%, #B98B51 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.obj_btn2 {
			font-size: 32rpx;
			color: #ffffff;
			width: 100%;
			height: 88rpx;
			background: linear-gradient(98deg, #fad85b 0%, #B98B51 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.address_box {
	padding: 24rpx;
	background: #F6F6F6;
	border-radius: 16rpx;
	margin-top: 20rpx;

	.address_cell {

		display: flex;
		align-items: center;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.address_content {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cell_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.cell_lit {
				font-size: 24rpx;
				color: #666666;
				font-weight: 500;
			}
		}
	}

	.address_cell:nth-child(2) {
		margin-top: 10rpx;
	}
}

.wxPopup {
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	padding-bottom: 60rpx;
	background-color: #fff;

	.tit {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.wx-main {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.wx-cell {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 50%;

			.wx-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 96rpx;
					height: 96rpx;
				}

			}

			text {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #666666
			}
		}
	}
}


.heat_body {
	background-color: #fff;
	padding: 20rpx 32rpx;

	.heatbox {
		height: 402rpx;
		// background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
		background-image: linear-gradient(180deg, #a6c8ff6b 0, #a6c8ff6b, 40%, #fff 100%);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 24rpx;
		box-shadow: 0 0 4rpx #ccc;

		.heattextbox {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 26rpx 22rpx;
			box-sizing: border-box;

			.heat_til {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 8rpx;
			}

			.heat_img {
				width: 38rpx;
				height: 38rpx;
			}

			.heat_more {
				width: fit-content;
				height: 44rpx;
				padding: 0 24rpx;
				background: linear-gradient(90deg, rgba(79, 131, 255, 0.05) 0%, rgba(79, 131, 255, 0.21) 100%);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #5d8bf8;
				margin-left: auto;
			}
		}

		.heat_shop_box {
			overflow-x: auto;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.heat_shop {
				width: 156rpx;
				margin-right: 16rpx;

				.heat_spimg {
					width: 150rpx;
					height: 150rpx;
					// background-color: red;
					border-radius: 16rpx;
				}

				.heat_spname {
					width: 150rpx;
					font-size: 22rpx;
					display: -webkit-box;
					/* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列 */
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					/* 隐藏超出范围的内容 */
					text-overflow: ellipsis;
					/* 使用省略号 */

				}

				.heat_price_box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.heat_payCount {
						font-size: 18rpx;
						color: #999;
					}
				}

				.heat_price {
					font-size: 26rpx;
					font-weight: bold;
					color: #fc394b;
				}

				.pr_icon {
					font-size: 20rpx;
					font-weight: bold;
					color: #fc394b;
				}
			}
		}
	}
}

.logo_body {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;

	image {
		width: 400rpx;
		height: 50rpx;
	}
}

.limitTime_bodoy {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;

	.limitTime_cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: linear-gradient(180deg, #fe232a 0%, #ff9c4b 100%);
		padding: 16rpx 24rpx;
		border-radius: 24rpx 24rpx 0 0;

		.limitTime_titbox {
			display: flex;
			align-items: center;

			.limit_title {
				font-size: 28rpx;
				font-weight: bold;
				color: #f1f1f1;
				margin-right: 24rpx;
			}

			.limit_text {
				font-size: 24rpx;
				color: #f1f1f1;
			}
		}

		.limitTime_litbox {
			font-size: 24rpx;
			color: #f1f1f1;
			letter-spacing: 2rpx;
		}
	}

	.limitTime_cell_green {
		background-image: linear-gradient(180deg, #1dd78c 0%, #5ed8ab 100%);
	}
}

.contentDiary {
	margin-top: 24rpx;
	padding: 24rpx;

	.content_cell {
		display: flex;

		.content_time {
			display: flex;
			flex-direction: column;
			align-items: center;

			.date_time {
				font-size: 24rpx;
				margin-bottom: 4rpx;
			}

			.year {
				font-size: 20rpx;
			}
		}

		.content_line {
			width: 10%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.line_round {
				width: 24rpx;
				height: 24rpx;
				min-height: 24rpx;
				min-width: 24rpx;
				border-radius: 50%;
				background-color: #FE4E01;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					content: '';
					width: 35%;
					height: 35%;
					border-radius: 50%;
					background-color: #fff;
				}
			}

			.line {
				width: 8rpx;
				height: calc(100% - 24rpx);
				background-color: #FE4E01;
			}
		}

		.content_main {
			flex: 1;

			.main_titbox {
				font-size: 28rpx;
				color: #111;
				margin-bottom: 14rpx;
			}

			.main_img {
				display: flex;
				flex-wrap: wrap;

				.img_box {

					width: 132rpx;
					height: 132rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;

					&:nth-child(4n) {
						margin-right: 0;
					}

					&:nth-child(n+5) {
						margin-bottom: 0;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.main_video {
				width: 100%;
				height: 280rpx;

				video {
					width: 100%;
					height: 100%;
				}
			}

			.content_btn {
				display: flex;
				justify-content: flex-end;

				.content_btnCell {
					font-size: 24rpx;
					padding: 24rpx 24rpx 12rpx;
					padding-right: 0;
					color: #FE4E01;
				}
			}
		}
	}
}

.agreementBox {
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	padding: 30rpx;
	padding-bottom: 130rpx;
	background-color: white;
	position: relative;

	.agContent {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.sgImgBox {
			width: 100%;
			padding: 30rpx 0;
			display: flex;

			.sgImgText {
				color: #5d8bf8;
				font-size: 28rpx;
			}

			.sgImgPic {
				width: 400rpx;
				min-height: 400rpx;

				>image {
					width: 100%;
					display: block;
				}
			}
		}

		.agSignBox {
			width: 100%;
			padding: 40rpx 0;

			.agSgBtn {
				margin: 0 auto;
				font-size: 32rpx;
				color: #ffffff;
				width: 80%;
				height: 68rpx;
				background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


	}

	.agBtnBox {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background: white;

		.agCloseBtn {
			margin: 0 auto;
			margin-top: 12rpx;
			font-size: 32rpx;
			color: #ffffff;
			width: 272rpx;
			height: 70rpx;
			background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
